<template>
  <div class="dashboard-container">
    <!-- 侧边栏导航 -->
    <div class="sidebar">
      <div class="logo">轻客管家</div>
      <el-menu
        :default-active="activePath"
        class="el-menu-vertical"
        @select="handleMenuSelect"
      >
        <el-menu-item index="dashboard">
          <el-icon><i-ep-home /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="system">
          <template #title>
            <el-icon><i-ep-setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="user-management">
            <el-icon><i-ep-user /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="role-management">
            <el-icon><i-ep-rank /></el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="department-management">
            <el-icon><i-ep-office-building /></el-icon>
            <span>部门管理</span>
          </el-menu-item>
          <el-menu-item index="system-log">
            <el-icon><i-ep-document /></el-icon>
            <span>系统日志</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="resource">
          <template #title>
            <el-icon><i-ep-folder /></el-icon>
            <span>资源列表</span>
          </template>
          
          <el-menu-item index="course-management">
            <el-icon><i-ep-document-copy /></el-icon>
            <span>课程管理</span>
          </el-menu-item>
          
          <el-menu-item index="activity-management">
            <el-icon><i-ep-calendar /></el-icon>
            <span>活动管理</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="lead">
          <template #title>
            <el-icon><i-ep-connection /></el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="lead-management">
            <el-icon><i-ep-collection-tag /></el-icon>
            <span>线索列表</span>
          </el-menu-item>
          <el-menu-item index="lead-pool">
            <el-icon><i-ep-data-board /></el-icon>
            <span>线索池</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部导航栏 -->
      <div class="header">
        <div class="welcome">欢迎，管理员</div>
        <div class="user-info">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar size="small">管</el-avatar>
              <span>管理员</span>
              <el-icon class="el-icon--right"><i-ep-arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 路由视图 -->
      <div class="content-wrapper">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" v-if="Component" />
            <!-- 首页默认内容 -->
            <div v-else class="dashboard-home">
              <div class="welcome-section">
                <h2>欢迎您，进入轻客管家系统</h2>
              </div>

              <div class="stats-section">
                <div class="stat-card">
                  <h3>线索概览</h3>
                  <div class="stat-grid">
                    <div class="stat-item">
                      <div class="stat-number">10</div>
                      <div class="stat-label">总线索数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">3</div>
                      <div class="stat-label">待跟进线索数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">2</div>
                      <div class="stat-label">构成商机线索数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">2</div>
                      <div class="stat-label">跟进中线索数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">1</div>
                      <div class="stat-label">伪线索</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">2</div>
                      <div class="stat-label">转化客户线索数</div>
                    </div>
                  </div>
                </div>

                <div class="stat-card">
                  <h3>商机概览</h3>
                  <div class="stat-grid">
                    <div class="stat-item">
                      <div class="stat-number">10</div>
                      <div class="stat-label">总商机数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">3</div>
                      <div class="stat-label">待跟进商机数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">2</div>
                      <div class="stat-label">待确认商机数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">2</div>
                      <div class="stat-label">跟进中商机数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">1</div>
                      <div class="stat-label">已回款商机数</div>
                    </div>
                    <div class="stat-item">
                      <div class="stat-number">2</div>
                      <div class="stat-label">转化客户商机数</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="quick-actions">
                <div
                  class="action-card"
                  @click="router.push('/dashboard/system-log')"
                >
                  <div class="action-icon"><i-ep-document /></div>
                  <div class="action-title">系统日志</div>
                  <div class="action-desc">查看系统操作记录</div>
                </div>
                <div
                  class="action-card"
                  @click="router.push('/dashboard/user-management')"
                >
                  <div class="action-icon"><i-ep-user /></div>
                  <div class="action-title">用户管理</div>
                  <div class="action-desc">管理系统用户账户</div>
                </div>
                <div
                  class="action-card"
                  @click="router.push('/dashboard/role-management')"
                >
                  <div class="action-icon"><i-ep-rank /></div>
                  <div class="action-title">角色管理</div>
                  <div class="action-desc">管理用户角色和权限</div>
                </div>
                <div
                  class="action-card"
                  @click="router.push('/dashboard/department-management')"
                >
                  <div class="action-icon"><i-ep-office-building /></div>
                  <div class="action-title">部门管理</div>
                  <div class="action-desc">管理公司部门结构</div>
                </div>
              </div>
            </div>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  HomeFilled as IEpHome,
  Setting as IEpSetting,
  User as IEpUser,
  Rank as IEpRank,
  OfficeBuilding as IEpOfficeBuilding,
  Document as IEpDocument,
  ArrowDown as IEpArrowDown,
  Folder as IEpFolder,
  DocumentCopy as IEpBook,
  Calendar as IEpDate,
  Edit as IEpNotebook,
  Link as IEpConnection,
  Collection as IEpCollectionTag,
  DataAnalysis as IEpDataBoard
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const activePath = ref("dashboard");

// 计算当前活动路径
const currentPath = computed(() => {
  const path = route.path;
  if (path.includes("user-management")) return "user-management";
  if (path.includes("role-management")) return "role-management";
  if (path.includes("department-management")) return "department-management";
  if (path.includes("system-log")) return "system-log";
  return "dashboard";
});

// 处理菜单选择
const handleMenuSelect = (key) => {
  if (key === "dashboard") {
    router.push("/dashboard");
  } else {
    router.push(`/dashboard/${key}`);
  }
};

// 处理登出
const handleLogout = () => {
  router.push("/login");
  ElMessage.success("退出登录成功");
};

// 组件挂载时设置活动路径
onMounted(() => {
  activePath.value = currentPath.value;
});
</script>

<style scoped>
.dashboard-container {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background-color: #e3f1ff;
  color: #7f93d5;
  overflow-y: auto;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  background-color: #002140;
}

.el-menu-vertical {
  border-right: none;
  background-color: transparent;
}

.el-menu {
  background-color: #001529;
}

/* 普通菜单项使用非白色字体 */
.el-menu-item {
  color: rgba(0, 0, 0, 0.65);
  height: 56px;
  line-height: 56px;
}

/* 系统管理菜单项使用白色字体 */
.el-sub-menu__title {
  color: #fff;
  height: 56px;
  line-height: 56px;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: #1890ff;
  color: #fff;
}

.el-menu-item.is-active {
  background-color: #1890ff;
  color: #fff;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部导航栏样式 */
.header {
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.welcome {
  font-size: 16px;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-dropdown-link .el-avatar {
  margin-right: 8px;
}

/* 内容包装器样式 */
.content-wrapper {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* 首页样式 */
.dashboard-home {
  height: 100%;
}

.welcome-section {
  margin-bottom: 32px;
}

.welcome-section h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 0;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.action-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.action-card:hover {
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
  transform: translateY(-2px);
}

.action-icon {
  font-size: 40px;
  color: #1890ff;
  margin-bottom: 16px;
}

.action-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.action-desc {
  font-size: 14px;
  color: #666;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
